<template>
  <div>
    <div class="outDiv">
      <scroller lock-x>
        <div>
          <go-back :white="true"></go-back>
          <div class="main" v-if="jobdata">
            <div class="title">
              <h3>{{ jobdata.jobTitle }}</h3>
              <p>
                {{ jobdata.major }}
                <b style="float:right">热度{{jobdata.view}}</b>
              </p>
            </div>
            <div class="content">
              <h2>职位描述(基础)</h2>
              <div class="introduceStep" v-if="jobdata.obligation">
                <div class="right">
                  <div class="itemTitle">职位职责</div>
                  <p class="describe" v-html="jobdata.obligation"></p>
                </div>
              </div>

              <div class="introduceStep" v-if="jobdata.demand">
                <div class="right">
                  <div class="itemTitle">岗位要求</div>
                  <p class="describe" v-html="jobdata.demand"></p>
                </div>
              </div>
              <div class="introduceStep border-wrapp" v-if="jobdata.promote">
                <div class="right">
                  <div class="itemTitle">晋升通道</div>
                  <p class="describe">{{ jobdata.promote }}</p>
                </div>
              </div>
              <div class="introduceStep border-wrapp" v-if="jobdata.status">
                <div class="right">
                  <div class="itemTitle">执业资格</div>
                  <p class="describe">{{ jobdata.status }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import goBack from "~/components/goBack";
import { getProfessionalDetails } from "~/api/evaluation";
import ls from "store2";
export default {
  components: {
    goBack
  },
  mounted() {
     this.$visit(this.$route.path)
    this.getProfessionalDetails();
  },
  data() {
    return {
      jobdata: {}
    };
  },
  methods: {
    getProfessionalDetails() {
        this.$loading('open')
      getProfessionalDetails(this.$route.query.jobName).then(res => {
        this.jobdata = res.data;
        this.$hideLoading()
      }).catch(err=>{
        this.$hideLoading()
      });
    }
  }
};
</script>

<style lang="less" scoped>
.outDiv {
  width: 100%;
  height: 100vh;
  background: #fff;
  .main {
    .title {
      padding: 0.32rem;
      background: #fff;
      border-bottom: 0.24rem solid rgba(247, 247, 250, 1);
      h3 {
        font-size: 0.36rem;
        font-weight: bold;
        color: #222;
        line-height: 0.57rem;
        margin-bottom: 0.32rem;
      }
      p {
        margin-top: 0.16rem;
        color: #999;
        font-size: 0.24rem;
      }
    }
    .content {
      background: #fff;
      padding: 0.3rem 0.32rem 0.66rem;
      h2 {
        display: block;
        font-size: 0.3rem;
        font-family: PingFangSC;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        line-height: 0.5rem;
      }
      .introduceStep {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        padding-top: 0.5rem;
        .left {
          width: 0.12rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          .topLine {
            width: 1px;
            height: 0.14rem;
            background: #e5e8ed;
          }
          .circle {
            width: 0.12rem;
            height: 0.12rem;
            border-radius: 50%;
            background: #e5e8ed;
          }
          .bottomLine {
            width: 1px;
            background: #e5e8ed;
            flex: 1;
          }
        }
        .right {
          // margin-left: 0.32rem;
          padding-right: 0.12rem;
          padding-bottom: 0.48rem;
          width: 100%;
          .itemTitle {
            color: rgba(199, 199, 199, 1);
            font-size: 0.28rem;
            font-weight: bold;
            line-height: 0.4rem;
            margin-bottom: 0.24rem;
          }
          .describe {
            font-size: 0.28rem;
            color: #222;
            line-height: 0.44rem;
          }
        }
      }
      .border-wrapp {
        border-top: 0.01rem solid rgba(229, 232, 237, 1);
        .right {
          .itemTitle {
            color: #222;
          }
        }
      }
    }
  }
}
</style>
